<template>
	<view class="page">
		<view class="tabVue margin0">
			<u-subsection :list="tabs" :current="current" @change="change" button-color="rgba(248, 195, 41, 1)" height="88" active-color="#fff" bg-color="#f5f5f5"></u-subsection>
		</view>
		
		<!-- 无记录显示 -->
		<view class="w100 flex-column align-center padding-column20 fixed-auto" v-if="isEmpty">
			<image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/empty.png" style="width: 256rpx; height: 256rpx;"></image>
			<text style="color: #81868e;">{{current===1 ? '暂无AI微信积分记录' : '暂无AI视频积分记录'}}</text>
		</view>
		
		<!-- 记录列表 -->
		<view class="item margin20 flex-between align-center" v-for="(item, index) in list" :key="index">
			<view class="flex-column flex-between" style="height: 100%;">
				<view class="number" :style="{color: item.action==='ADD' ? '#18AB4E' : '#EF4444'}">{{item.points}}</view>
				<text style="color: #888; line-height: 1;">{{item.createTime}}</text>
			</view>
			<view class="tip">{{item.action!=='ADD'?`使用${item.points}${current===1?'微信':"视频"}积分`:`增加${item.points}${current===0?'微信':"视频"}积分`}}</view>
		</view>
		
		<u-gap height="30"></u-gap>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				tabs: [{ name: "AI视频积分"}, {name: "AI微信积分"}],
				current: 0,
				isEmpty: true,
				list: []
			}
		},
		
		async onLoad() {
			await this.getList()
		},
		
		methods: {
			change(e){
				this.current = e
				this.getList()
			},
			// 获取积分记录
			async getList(){
				const res = await this.$request("/aiet-user-center/user/points/records", {
					type: this.current===0 ? 'AI_VIDEO' : 'AI_WECHAT'
				}, "GET")
				if(res.code === 200) {
					this.list = res.data
					this.isEmpty = res.data.length===0
					console.log("获取积分记录", this.list)
				}	
			},
		}
	}
</script>

<style lang="less" scoped>
	.tabVue {
		width: 100%;
		padding: 30rpx 30rpx 0;
		background: #fff;
	}
	.item {
		width: 690rpx;
		height: 120rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx 30rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178,178,178,0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255,255,255,0.25);
		.number {
			color: #000;
			font-weight: 600;
			font-size: 30rpx;
			line-height: 1;
		}
	}
</style>